

<template>
    <div class="detail"  >
       <MyHead :title="$route.query.title" ></MyHead>
       <div class="list" v-if="item">
        <div class="item" >
            <div class="link" >
                <div class="item-box">
                    <div class="line">
                        <div class="name center">
                          <van-icon name="user-o" /> {{ item.author.username }}
                        </div>
                        <div class="date center ">
                          <van-icon name="clock-o"></van-icon>:{{ item.date | timeFormat(true) }}
                        </div>
                    </div>
                    <div class="title mt5 row">
                      <van-icon name="fire" color="red" class="icon"></van-icon> <span>{{ item.hot }}</span>
                    </div>
                    <div class="title mt5 row">
                      <van-icon name="label-o" class="icon"></van-icon> <span>{{ item.title }}</span>
                    </div>
                    <div class="campany mt5 row">
                      <van-icon name="cashier-o"  class="icon"></van-icon> <span>{{ item.campany }}</span>
                    </div>
                    <div class="address mt5 row">
                      <van-icon name="location-o"  class="icon"></van-icon> <span>{{ item.address }}</span>
                    </div>
                    <div class="level mt5 row">
                      <van-icon name="chart-trending-o "  class="icon"></van-icon>
                      <van-tag size="large"  :color="colors[loda.findIndex(levels,(v)=>v==item.level)] "> {{ item.level }} </van-tag>
                    </div>
                    <div class="tags mt5 row">
                      <p>面试标签:</p>
                      <div class="mt5">
                        <van-tag class="tag" size="large" round :color="colors[index]"   v-for="(val,index) in item.tags">  {{ val.value }} </van-tag>
                      </div>
                    </div>
                    <div class="imgs mt5 row">
                      <p>面试图片:</p>
                      <div class="mt5" v-if="item.imgs.length==1">
                        <img class="bigimg" @click="previewImg(0)" :src="item.imgs[0].url.replace(/public/,baseURL)"   alt="">
                      </div>
                      <div class="mt5 sbox" v-else>
                        <img class="simg" @click="previewImg(i)" :src="v.url.replace(/public/,baseURL)"  v-for="(v,i) in item.imgs" :key="i" alt="">

                      </div>
                    </div>

                    <div class="tags mt5 row" v-if="item.audioSrc">
                      <p>面试录音:</p>
                      <div class="mt5 audio">
                        <audio  controls :src="item.audioSrc.replace(/public/,baseURL)" ></audio>
                      </div>
                    </div>

                    <div class="ques mt5 row" >
                      <p>面试题目:</p>
                      <div class="mt5">
                        <van-cell-group >
                          <van-cell :to="'/ques/detail/'+id+'_'+v.label+'?ques='+v.value+'&phone='+item.author.phone + '&hot='+item.hot " is-link :title="'第'+(index+1)+'题'" v-for="(v,index) in item.quesList" :key="index" icon="label-o" :value="v.value"      />
                        </van-cell-group>
                      </div>
                    </div>

                    <div class="ques mt5 row" >
                      <p>面试总结:</p>
                      <div class="mt5">
                        <div class="content"> {{ item.content }} </div>
                      </div>
                    </div>

                    <div class="actions mt10 row">
                        <div class="cit"  @click="throttle(todoLikeAction(),1000)">
                          <van-icon name="like" :color="hasLike?'#EE6666':'#333'"  /><span  :style="{color:hasLike?'#EE6666':'#333'}"> {{ likeCount }}</span>

                        </div>
                        <div class="cit" @click="throttle(todoCollectAction(),600) ">
                          <van-icon name="star" :color="hasCollect?'#EE6666':'#333'"  /><span :style="{color:hasCollect?'#EE6666':'#333'}">{{ collectCount }}</span>
                        </div>
                        <div class="cit" @click.stop="show=true">
                          <van-icon name="comment" /> <span>{{ item.pings }}</span>

                        </div>
                    </div>
                </div>
              </div>
        </div>

        <div class="alist mt20" >
          <div v-if="pingList.length>0">
            <van-divider
              :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0' }"
            >
              所有评论({{ pingList.length }})
            </van-divider>

            <div class="anlist">
                <div class="aitem" v-for="(v,index) in pingList" :key="index">
                    <div class="left">
                        <Avatar :src="v.userInfo.avatar"></Avatar>
                    </div>
                    <div class="right">
                        <h3 class="name ">{{ v.userInfo.username }} <span v-if="item.author.phone==v.userInfo.phone" style="color:#EE6666">(面试者)</span></h3>
                        <div class="answer mt5">
                          {{ v.comment }}
                        </div>
                        <div class="time mt10">
                          <span> {{v.time | timeFormat(true) }}</span>
                            <van-rate size="12px" v-model="v.rate" icon="like" void-icon="like-o" readonly />

                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="empty" v-else>
            <van-empty
              class="custom-image"
              image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
              description="没有评论哦~"
            />
          </div>
        </div>

      </div>


      <van-overlay :show="show"  >
        <div class="mask" v-if="show" >
            <div class="mask-box">
              <van-field
                v-model="form.comment"
                rows="6"
                autosize
                type="textarea"
                maxlength="400"
                placeholder="请输入你的评论"
                show-word-limit
                class="textarea"
              />
              <div class="mt10 rtext">
                评分: <van-rate  v-model="form.rate"  icon="like" void-icon="like-o"  />
              </div>
              <div class="mt10">
                <van-button :disabled="!form.comment" @click="addComments"  block type="primary" >提交评论</van-button>
              </div>
              <div class="mt10">
                <van-button    block type="default"  @click="show=false">关闭评论</van-button>
              </div>
            </div>
        </div>
    </van-overlay>
    </div>
</template>


<script>
import { todogetmsbyid , todochangemshot , todogetmslikes, todoaddlikeone , tododellikeone , todochangemsinfo , todogetcollectlist,todoaddcollectone,tododelcollectone ,todogetpinglist, todoaddpingsone  } from '@/api/api'
import { ImagePreview } from 'vant';

export default {
  data(){
    return {
       item:null,
       id:'',   // 面试的id
       hasLike:false, // 判断是否点赞
       likeId:'',  // 点赞的id
       likeCount:0,  // 点赞的个数

       hasCollect:false, // 判断是否收藏
       collectId:'',  // 收藏的id
       collectCount:0,  // 收藏的个数

       pingList:[],
       show:false,
       form:{
        rate:5,
       }
    }
  },
  methods:{
    // 提交评论
    async addComments(){
      let res = await todoaddpingsone({
        mid:this.id,
        phone:this.userInfo.phone,
        userInfo:this.userInfo,
        msobj:this.item,
        ...this.form,
        time:new Date()
      })
      if(res.code==200){
        this.ShowSuccess('评论成功')
        this.show = false;
        this.form.comment = '';
        this.form.rate = 5;

        setTimeout(()=>{
          this.getPingList()
          this.changemsHot(this.item.hot+4)
          this.changeMsData({pings:this.item.pings+1})
        },500)
      }
    },
    // 获取评论列表
    async getPingList(){
      let res = await todogetpinglist({
        mid:this.id,

      })
      if(res.code==200){
        this.pingList = res.result;
      }
    },
    // 收藏逻辑
    async todoCollectAction(){
       if(this.hasCollect){
          let data = await todogetcollectlist({
              mid:this.id,
              phone:this.userInfo.phone,
          })
          let res = await tododelcollectone({
            _id:data.result[0]._id,
            mid:this.id
          })
          if(res.code==200){
             this.hasCollect = false;
             this.ShowSuccess('取消收藏了')
             this.collectCount-=1;
             setTimeout(()=>{
              this.changemsHot(this.item.hot-3)
              this.changeMsData({collects:this.item.collects-1})
             },500)
          }
       }else{
          let res = await todoaddcollectone({
            mid:this.id,
            msobj:this.item,
          })
          if(res.code==200){
             this.hasCollect = true;
             this.ShowSuccess('收藏成功')
             this.collectCount+=1;
             setTimeout(()=>{
              this.changemsHot(this.item.hot+3)
              this.changeMsData({collects:this.item.collects+1})
             },500)
          }
       }
    },
    async getHasCollect(){
      let res = await todogetcollectlist({
        mid:this.id,
        phone:this.userInfo.phone,

      })
      if(res.code==200){
        if(res.result.length>0){
          this.hasCollect = true;
          // this.collectId = res.result[0].id
        }else{
          this.hasCollect = false;
        }
      }
    },

    async getCollectCount(){
      let res = await todogetcollectlist({
        mid:this.id,
      })
      if(res.code==200){
        this.collectCount = res.result.length;
      }
    },

    async changeMsData(payload){
      let res = await todochangemsinfo({
        _id:this.id,
        ...payload,
      })
      if(res.code==200){
        this.item = { ...this.item, ...payload}
      }
    },

    // 添加点赞 Or 删除点赞
    async todoLikeAction(){
      // 判断你本人有没有点赞过这个面试
      if(this.hasLike){
        // 已点赞  得到点赞记录_id
        let data = await todogetmslikes({
            mid:this.id,
            phone:this.userInfo.phone,
        })
        let res = await tododellikeone({
          _id:data.result[0]._id,
          mid:this.id,
        })
        if(res.code==200){
          this.hasLike = false;
          this.ShowSuccess("取消点赞了")
          setTimeout(()=>{
            this.likeCount-=1;
            this.changeMsData({likes:this.item.likes-1})
            this.changemsHot(this.item.hot-2)
          },500)

        }
      }else{
        // 没点赞
        let res = await todoaddlikeone({
          mid:this.id,
          msobj:this.item,
        })
        if(res.code==200){
          this.hasLike = true;
          this.ShowSuccess("点赞成功")
          setTimeout(()=>{
            this.likeCount+=1;
            this.changeMsData({likes:this.item.likes+1})
            this.changemsHot(this.item.hot+2)  // 热度
          },500)
        }
      }
    },
    // 获取点赞列表 (判断我本人是否已经点赞)
    async checkHasLike(){
      let res = await todogetmslikes({
        mid:this.id,
        phone:this.userInfo.phone,
      })
      if(res.code==200){
        if(res.result.length>0){
          this.hasLike = true;
          this.likeId = res.result[0]._id;
        }else{
          this.hasLike = false;
        }
      }
    },
    async getLikeCount(){
      // 点赞次数
      let res = await todogetmslikes({
        mid:this.id,

      })
      if(res.code==200){
        this.likeCount = res.result.length;
      }
    },


    async changemsHot(hot){
      let res = await todochangemshot({
        _id:this.id,
        hot,
      })
      if(res.code==200){
        this.$set(this.item,'hot',hot)
      }
    },
    previewImg(index){
      let images = this.item.imgs.map((item)=>{
        return item.url.replace(/public/,this.baseURL)
      })
      console.log(images)
      ImagePreview({
        images: images,
        startPosition: index, // 指定看哪一张图片
      });
    },
    async getmsdatabyid(){
      let res = await todogetmsbyid({
        _id:this.$route.params.id
      })
      if(res.code==200 && res.result){
        this.item = res.result;
        this.changemsHot(res.result.hot+1)  // 更新热度
      }
    }
  },
  mounted(){
    this.id = this.$route.params.id;
    this.getmsdatabyid()

    // 登录状态
    if(this.userInfo){
      this.checkHasLike()
      this.getLikeCount()

      this.getCollectCount()
      this.getHasCollect()

      this.getPingList()
    }

  }
}
</script>


<style lang="scss" scoped>
.rtext{
  display: flex;
  align-items: center;
  color:#fff;
}
.textarea{
  border:0.5px solid #ddd;
  border-radius: 10px;
}
.mask{
  display: flex;
  width:100%;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  &-box{
    width:100%;
    height:220px;
    padding:0 30px;
  }
}

.anlist{
  width:100%;
  height:500px;
  overflow: auto;
  .aitem{
    display: flex;
    margin-top:18px;
    border-bottom:0.5px solid #ddd;
    padding-bottom:10px;
    width:100%;
    .left{
      flex-shrink: 0;
    }
    .right{
      flex:1;
    }
    .name{
      color:#999;
      font-size: 14px;
    }
    .answer{
      color:#000;
      font-weight:bold;
      font-size: 16px;
    }
    .time{
      color:#999;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width:100%;
    }
  }
}
// .cit{
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   align-items: center;
// }
.content{
  width:100%;
  min-height:100px;
  background: #fff;
  border-radius: 8px;
  padding:10px;
}
.title, .campany , .address{
  color:#000;
  font-size:16px;
  font-weight: 500;
}
.audio{
  background:#fff;
  padding:8px;
  display: flex;
  justify-content: center;
}
.actions{
  border-top:0.5px solid #ddd;
  width:100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top:10px;

}
.imgs{

    .sbox{
      display: flex;
      flex-wrap: wrap;
      width:100%;
    }
    .simg{
      width:100px;
      height:100px;
      border-radius: 10px;
      margin:0px 10px 10px 0;
    }
  .bigimg{
    width:100%;
    height:300px;
    border-radius: 10px;
  }
}
.tag{
  margin:3px 3px 0 0 ;
}
.center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.list{
  padding:0px 15px 15px;
  .item{
    margin-top:20px;
    background: #f4f4f4;
    border-radius: 10px;
    padding:10px;

    .link{
      color:#666;
      .line{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom:0.5px solid #ddd;
        padding-bottom:5px;
      }
      .name{
        font-weight: 600;
      }
      .row{
        .icon{
          margin-right:4px;
        }
      }
    }
  }
}
</style>
